<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售机会详情 - CRM旅游管理系统</title>
    <link rel="stylesheet" href="../../../shared/styles/apple-design.css">
    <link rel="stylesheet" href="../styles/opportunity-detail.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
        <div class="nav-container">
            <div class="nav-left">
                <div class="nav-brand">
                    <i class="fas fa-map-marked-alt"></i>
                    <span>CRM旅游系统</span>
                </div>
                <div class="nav-breadcrumb">
                    <span class="breadcrumb-item">销售管理</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item">
                        <a href="opportunity-management.html">销售机会</a>
                    </span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item active">机会详情</span>
                </div>
            </div>
            <div class="nav-right">
                <button class="nav-button" id="notifications-btn">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">6</span>
                </button>
                <div class="user-menu">
                    <img src="https://via.placeholder.com/32x32/007AFF/FFFFFF?text=管" alt="用户头像" class="user-avatar">
                    <span class="user-name">管理员</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 页面头部 -->
        <header class="page-header">
            <div class="header-left">
                <h1 class="page-title">李女士夫妇-云南深度7日游</h1>
                <div class="page-meta">
                    <span class="opportunity-number">OPP20250121001</span>
                    <span class="separator">•</span>
                    <span class="creation-time">创建于 2025-01-18 14:30</span>
                </div>
            </div>
            <div class="header-right">
                <button class="btn btn-outline" id="edit-opportunity-btn">
                    <i class="fas fa-edit"></i>
                    编辑机会
                </button>
                <button class="btn btn-primary" id="advance-stage-btn">
                    <i class="fas fa-step-forward"></i>
                    推进阶段
                </button>
            </div>
        </header>

        <!-- 机会概览卡片 -->
        <section class="overview-cards">
            <div class="overview-grid">
                <div class="overview-card level-card">
                    <div class="card-icon level-a">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="card-content">
                        <div class="card-title">机会等级</div>
                        <div class="card-value">A级 (热门)</div>
                        <div class="card-desc">意向强烈，预计7天内成交</div>
                    </div>
                </div>

                <div class="overview-card stage-card">
                    <div class="card-icon stage-5">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="card-content">
                        <div class="card-title">当前阶段</div>
                        <div class="card-value">决策促成</div>
                        <div class="card-desc">阶段 5/12 · 进度 83%</div>
                    </div>
                </div>

                <div class="overview-card amount-card">
                    <div class="card-icon amount">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <div class="card-content">
                        <div class="card-title">预计金额</div>
                        <div class="card-value">¥15,800</div>
                        <div class="card-desc">两人云南深度游</div>
                    </div>
                </div>

                <div class="overview-card date-card">
                    <div class="card-icon date">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <div class="card-content">
                        <div class="card-title">预计成交</div>
                        <div class="card-value">2025-01-25</div>
                        <div class="card-desc">距离还有 4 天</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 内容区域 -->
        <div class="content-layout">
            <!-- 左侧主要内容 -->
            <div class="main-section">
                <!-- 销售阶段进度 -->
                <section class="stage-progress-section">
                    <div class="section-header">
                        <h2>销售阶段进度</h2>
                        <div class="progress-summary">
                            <span class="current-stage">当前：第5阶段</span>
                            <span class="progress-percent">83%</span>
                        </div>
                    </div>
                    
                    <div class="stage-timeline">
                        <div class="timeline-stage completed">
                            <div class="stage-dot">1</div>
                            <div class="stage-info">
                                <div class="stage-title">初步接触</div>
                                <div class="stage-date">2025-01-18</div>
                            </div>
                        </div>
                        
                        <div class="timeline-stage completed">
                            <div class="stage-dot">2</div>
                            <div class="stage-info">
                                <div class="stage-title">需求分析</div>
                                <div class="stage-date">2025-01-19</div>
                            </div>
                        </div>
                        
                        <div class="timeline-stage completed">
                            <div class="stage-dot">3</div>
                            <div class="stage-info">
                                <div class="stage-title">方案推荐</div>
                                <div class="stage-date">2025-01-20</div>
                            </div>
                        </div>
                        
                        <div class="timeline-stage completed">
                            <div class="stage-dot">4</div>
                            <div class="stage-info">
                                <div class="stage-title">方案优化</div>
                                <div class="stage-date">2025-01-21</div>
                            </div>
                        </div>
                        
                        <div class="timeline-stage current">
                            <div class="stage-dot">5</div>
                            <div class="stage-info">
                                <div class="stage-title">决策促成</div>
                                <div class="stage-date">进行中</div>
                            </div>
                        </div>
                        
                        <div class="timeline-stage pending">
                            <div class="stage-dot">6</div>
                            <div class="stage-info">
                                <div class="stage-title">合同签署</div>
                                <div class="stage-date">待进行</div>
                            </div>
                        </div>
                        
                        <div class="timeline-stage pending">
                            <div class="stage-dot">7</div>
                            <div class="stage-info">
                                <div class="stage-title">款项收取</div>
                                <div class="stage-date">待进行</div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 跟进记录 -->
                <section class="followup-section">
                    <div class="section-header">
                        <h2>跟进记录</h2>
                        <button class="btn btn-primary" id="add-followup-btn">
                            <i class="fas fa-plus"></i>
                            添加跟进
                        </button>
                    </div>
                    
                    <div class="followup-timeline">
                        <div class="followup-item">
                            <div class="followup-time">
                                <div class="time-dot"></div>
                                <div class="time-info">
                                    <div class="date">2025-01-21</div>
                                    <div class="time">15:30</div>
                                </div>
                            </div>
                            <div class="followup-content">
                                <div class="followup-header">
                                    <div class="followup-title">电话沟通 - 价格协商</div>
                                    <div class="followup-meta">
                                        <span class="method">电话沟通</span>
                                        <span class="duration">25分钟</span>
                                    </div>
                                </div>
                                <div class="followup-details">
                                    <p>与李女士详细讨论了云南7日游的价格构成，客户对酒店档次和餐饮标准比较关注。经过说明，客户对15800元的价格基本认可，但希望能有一些小的优惠。</p>
                                    <div class="followup-tags">
                                        <span class="tag tag-positive">意向增强</span>
                                        <span class="tag tag-info">价格敏感</span>
                                    </div>
                                </div>
                                <div class="followup-result">
                                    <div class="result-item">
                                        <strong>客户反馈：</strong>对方案整体满意，希望能优惠200-300元
                                    </div>
                                    <div class="result-item">
                                        <strong>解决方案：</strong>提供生日优惠200元，总价15600元
                                    </div>
                                    <div class="result-item">
                                        <strong>下次计划：</strong>明天上午再次联系确认最终决定
                                    </div>
                                </div>
                                <div class="followup-footer">
                                    <span class="consultant">张顾问</span>
                                    <div class="followup-actions">
                                        <button class="action-btn" title="编辑">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="action-btn" title="删除">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="followup-item">
                            <div class="followup-time">
                                <div class="time-dot"></div>
                                <div class="time-info">
                                    <div class="date">2025-01-20</div>
                                    <div class="time">10:15</div>
                                </div>
                            </div>
                            <div class="followup-content">
                                <div class="followup-header">
                                    <div class="followup-title">微信发送方案 - 详细行程</div>
                                    <div class="followup-meta">
                                        <span class="method">微信交流</span>
                                        <span class="duration">-</span>
                                    </div>
                                </div>
                                <div class="followup-details">
                                    <p>通过微信发送了详细的云南7日游行程方案，包含景点介绍、酒店图片、餐饮安排等。客户表示需要和老伴商量一下。</p>
                                    <div class="followup-tags">
                                        <span class="tag tag-neutral">需要商量</span>
                                        <span class="tag tag-info">方案认可</span>
                                    </div>
                                </div>
                                <div class="followup-result">
                                    <div class="result-item">
                                        <strong>客户反馈：</strong>方案很详细，需要和老伴商量决定
                                    </div>
                                    <div class="result-item">
                                        <strong>下次计划：</strong>给客户1天时间考虑，明天跟进
                                    </div>
                                </div>
                                <div class="followup-footer">
                                    <span class="consultant">张顾问</span>
                                </div>
                            </div>
                        </div>

                        <div class="followup-item">
                            <div class="followup-time">
                                <div class="time-dot"></div>
                                <div class="time-info">
                                    <div class="date">2025-01-19</div>
                                    <div class="time">14:00</div>
                                </div>
                            </div>
                            <div class="followup-content">
                                <div class="followup-header">
                                    <div class="followup-title">上门拜访 - 需求调研</div>
                                    <div class="followup-meta">
                                        <span class="method">上门拜访</span>
                                        <span class="duration">90分钟</span>
                                    </div>
                                </div>
                                <div class="followup-details">
                                    <p>上门拜访李女士夫妇，详细了解了他们的出行需求、身体状况、兴趣爱好等。夫妇俩身体健康，喜欢自然风光，预算充足。</p>
                                    <div class="followup-tags">
                                        <span class="tag tag-positive">需求明确</span>
                                        <span class="tag tag-success">预算充足</span>
                                    </div>
                                </div>
                                <div class="followup-footer">
                                    <span class="consultant">张顾问</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 决策分析 -->
                <section class="decision-analysis-section">
                    <div class="section-header">
                        <h2>决策分析</h2>
                    </div>
                    
                    <div class="analysis-grid">
                        <div class="analysis-card">
                            <div class="analysis-title">决策角色</div>
                            <div class="decision-roles">
                                <div class="role-item">
                                    <span class="role-label">主决策人</span>
                                    <span class="role-name">李女士</span>
                                </div>
                                <div class="role-item">
                                    <span class="role-label">影响决策人</span>
                                    <span class="role-name">李先生（配偶）</span>
                                </div>
                                <div class="role-item">
                                    <span class="role-label">使用者</span>
                                    <span class="role-name">李女士夫妇</span>
                                </div>
                                <div class="role-item">
                                    <span class="role-label">支付者</span>
                                    <span class="role-name">李女士</span>
                                </div>
                            </div>
                        </div>

                        <div class="analysis-card">
                            <div class="analysis-title">决策特点</div>
                            <div class="decision-style">
                                <div class="style-item">
                                    <span class="style-label">决策风格</span>
                                    <span class="style-value">征询意见型</span>
                                </div>
                                <div class="style-item">
                                    <span class="style-label">决策周期</span>
                                    <span class="style-value">5-7天</span>
                                </div>
                                <div class="factors-grid">
                                    <div class="factor-item">
                                        <span class="factor-name">价格敏感度</span>
                                        <div class="factor-rating">
                                            <div class="rating-stars">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="far fa-star"></i>
                                                <i class="far fa-star"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="factor-item">
                                        <span class="factor-name">品质要求</span>
                                        <div class="factor-rating">
                                            <div class="rating-stars">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="far fa-star"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="factor-item">
                                        <span class="factor-name">安全关注</span>
                                        <div class="factor-rating">
                                            <div class="rating-stars">
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                                <i class="fas fa-star"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="analysis-card">
                            <div class="analysis-title">竞争情况</div>
                            <div class="competition-info">
                                <div class="competition-status">
                                    <i class="fas fa-exclamation-triangle text-warning"></i>
                                    <span>存在竞争对手</span>
                                </div>
                                <div class="competitor-details">
                                    <div class="competitor-item">
                                        <strong>竞争对手：</strong>春秋旅游
                                    </div>
                                    <div class="competitor-item">
                                        <strong>对方优势：</strong>价格便宜500元
                                    </div>
                                    <div class="competitor-item">
                                        <strong>我方优势：</strong>服务品质更好，酒店档次更高
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <!-- 右侧信息栏 -->
            <aside class="sidebar-section">
                <!-- 客户信息卡片 -->
                <div class="info-card customer-card">
                    <div class="card-header">
                        <h3>关联客户</h3>
                        <a href="customer-detail.html?id=101" class="view-link">
                            <i class="fas fa-external-link-alt"></i>
                        </a>
                    </div>
                    <div class="customer-info">
                        <div class="customer-avatar">李</div>
                        <div class="customer-details">
                            <div class="customer-name">李大妈</div>
                            <div class="customer-phone">139****8002</div>
                            <div class="customer-status">
                                <span class="status-badge status-active">有效客户</span>
                            </div>
                        </div>
                    </div>
                    <div class="customer-stats">
                        <div class="stat-item">
                            <span class="stat-label">年龄</span>
                            <span class="stat-value">65岁</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">健康状况</span>
                            <span class="stat-value health-good">健康良好</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">消费记录</span>
                            <span class="stat-value">2次</span>
                        </div>
                    </div>
                </div>

                <!-- 负责顾问信息 -->
                <div class="info-card consultant-card">
                    <div class="card-header">
                        <h3>负责顾问</h3>
                    </div>
                    <div class="consultant-info">
                        <div class="consultant-avatar">张</div>
                        <div class="consultant-details">
                            <div class="consultant-name">张顾问</div>
                            <div class="consultant-role">高级旅游顾问</div>
                            <div class="consultant-contact">
                                <i class="fas fa-phone"></i>
                                138****0001
                            </div>
                        </div>
                    </div>
                    <div class="consultant-stats">
                        <div class="stat-item">
                            <span class="stat-label">本月成交</span>
                            <span class="stat-value">12单</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">成交率</span>
                            <span class="stat-value">68%</span>
                        </div>
                    </div>
                </div>

                <!-- 机会信息 -->
                <div class="info-card opportunity-info-card">
                    <div class="card-header">
                        <h3>机会信息</h3>
                    </div>
                    <div class="opportunity-details">
                        <div class="detail-item">
                            <span class="detail-label">线索来源</span>
                            <span class="detail-value">邀约活动转化</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">机会类型</span>
                            <span class="detail-value">老客户复购</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">预计出团</span>
                            <span class="detail-value">2025-02-10</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">出行人数</span>
                            <span class="detail-value">2人</span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">预算范围</span>
                            <span class="detail-value">15,000-20,000元</span>
                        </div>
                    </div>
                </div>

                <!-- 下次跟进计划 -->
                <div class="info-card next-followup-card">
                    <div class="card-header">
                        <h3>下次跟进</h3>
                        <button class="btn-icon" title="编辑计划">
                            <i class="fas fa-edit"></i>
                        </button>
                    </div>
                    <div class="next-followup">
                        <div class="followup-time-info">
                            <div class="followup-date">2025-01-22</div>
                            <div class="followup-time">10:00</div>
                        </div>
                        <div class="followup-plan">
                            <div class="plan-title">电话确认最终决定</div>
                            <div class="plan-desc">联系客户确认是否接受优惠价格，促成最终决策</div>
                        </div>
                        <div class="reminder-status">
                            <i class="fas fa-bell text-primary"></i>
                            <span>已设置提醒</span>
                        </div>
                    </div>
                </div>

                <!-- 快捷操作 -->
                <div class="info-card quick-actions-card">
                    <div class="card-header">
                        <h3>快捷操作</h3>
                    </div>
                    <div class="quick-actions">
                        <button class="action-button">
                            <i class="fas fa-phone"></i>
                            <span>拨打电话</span>
                        </button>
                        <button class="action-button">
                            <i class="fas fa-comment"></i>
                            <span>发送微信</span>
                        </button>
                        <button class="action-button">
                            <i class="fas fa-file-alt"></i>
                            <span>发送方案</span>
                        </button>
                        <button class="action-button">
                            <i class="fas fa-calendar-plus"></i>
                            <span>安排回访</span>
                        </button>
                        <button class="action-button">
                            <i class="fas fa-exchange-alt"></i>
                            <span>转移机会</span>
                        </button>
                        <button class="action-button danger">
                            <i class="fas fa-times-circle"></i>
                            <span>关闭机会</span>
                        </button>
                    </div>
                </div>
            </aside>
        </div>
    </main>

    <!-- 模态框：添加跟进记录 -->
    <div class="modal-overlay" id="add-followup-modal">
        <div class="modal large-modal">
            <div class="modal-header">
                <h3 class="modal-title">添加跟进记录</h3>
                <button type="button" class="modal-close" onclick="closeFollowupModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">跟进时间</label>
                        <input type="datetime-local" class="form-input" id="followup-time" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">跟进方式</label>
                        <select class="form-select" id="followup-method" required>
                            <option value="">请选择跟进方式</option>
                            <option value="phone">电话沟通</option>
                            <option value="wechat">微信交流</option>
                            <option value="visit">上门拜访</option>
                            <option value="email">邮件联系</option>
                            <option value="sms">短信联系</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">沟通时长(分钟)</label>
                        <input type="number" class="form-input" id="followup-duration" placeholder="实际沟通时间">
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">沟通主题</label>
                    <input type="text" class="form-input" id="followup-topic" placeholder="本次沟通的核心议题" required>
                </div>

                <div class="form-group">
                    <label class="form-label">详细内容</label>
                    <textarea class="form-textarea" id="followup-content" rows="4" placeholder="完整记录沟通过程..." required></textarea>
                </div>

                <div class="form-group">
                    <label class="form-label">客户反馈</label>
                    <textarea class="form-textarea" id="customer-feedback" rows="3" placeholder="客户的具体回应和态度..." required></textarea>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">沟通效果</label>
                        <select class="form-select" id="communication-effect" required>
                            <option value="">请选择沟通效果</option>
                            <option value="excellent">非常好</option>
                            <option value="good">较好</option>
                            <option value="average">一般</option>
                            <option value="poor">较差</option>
                            <option value="bad">很差</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">意向变化</label>
                        <select class="form-select" id="intention-change" required>
                            <option value="">请选择意向变化</option>
                            <option value="increased">意向增强</option>
                            <option value="maintained">意向维持</option>
                            <option value="decreased">意向下降</option>
                            <option value="disappeared">意向消失</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">阶段推进</label>
                        <select class="form-select" id="stage-progress">
                            <option value="stay">停留在当前阶段</option>
                            <option value="advance">推进到下一阶段</option>
                            <option value="retreat">退回到上一阶段</option>
                        </select>
                    </div>
                </div>

                <div class="form-section">
                    <h4>下次跟进计划</h4>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">下次跟进时间</label>
                            <input type="datetime-local" class="form-input" id="next-followup-time">
                        </div>
                        <div class="form-group">
                            <label class="form-label">跟进方式</label>
                            <select class="form-select" id="next-followup-method">
                                <option value="">请选择跟进方式</option>
                                <option value="phone">电话沟通</option>
                                <option value="wechat">微信交流</option>
                                <option value="visit">上门拜访</option>
                                <option value="email">邮件联系</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">跟进目标</label>
                        <input type="text" class="form-input" id="next-followup-goal" placeholder="下次沟通要达成的目标">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeFollowupModal()">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveFollowup()">保存跟进</button>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="../scripts/opportunity-detail.js"></script>
</body>
</html>